<template>
    <section>
        <el-tabs v-model="active" size="small" class="base-card">
            <el-tab-pane label="选楼盘" :name="0">
                <section class=""></section>
            </el-tab-pane>
            <el-tab-pane label="选点位" :name="1"></el-tab-pane>
        </el-tabs>
        <section class="top-info-bar">
            <el-button
                v-if="active == selectPointTabsType.SELECT_BUILDING"
                type="primary"
                plain
                @click="showDrawer = !showDrawer"
            >标签选楼</el-button
            >
            <ul class="info-container">
                <li v-for="item in projectInfo" :key="item.label">
                    <label for="">{{ item.label }}：</label>
                    <span>{{ planDetail[item.value] }}</span>
                </li>
            </ul>
        </section>
        <section id="componentsContainer" :style="{ height: `${maxTableHeight > 516 ? maxTableHeight : 516}px` }">
            <template v-if="active == selectPointTabsType.SELECT_BUILDING">
                <MapBox
                    ref="mapSelectBuildRef"
                    v-loading="loadingMap"
                    class="map-box"
                    :city-name="planDetail.cityName"
                    :get-point-list="planDetail.premisesList"
                    @getSelectedPoint="getSelectedPoint"
                    @citySelected="citySelected"
                    @refresh="handleGetBuilding"
                />
                <TagBuildingDrawer
                    v-if="showDrawer"
                    v-model:showDrawer="showDrawer"
                    :size="1300"
                    title="标签选楼"
                    @refresh="handleGetBuilding"
                />
            </template>
            <SelectPointForm v-else class="point-form" @refresh="handleGetBuilding" />
        </section>
        <SignDailog :model-value="showSignDailog" @handleClose="handleCloseSignDailog" />
    </section>
</template>

<script setup lang="ts">
import {
    ref,
    computed,
    effect,
    nextTick,
    watch,
    defineProps,
    defineExpose,
    defineAsyncComponent,
    defineEmits,
} from 'vue';
import MapBox from '@/components/Map/MapBox.vue';
import TagBuildingDrawer from './tagBuildingDrawer.vue';
import SelectPointForm from './selectPointForm.vue';
import { selectPointTabsType } from '../programType.ts';
import { getAll, lockPoint } from '@/api/plan';
import useTableSetting from '@/hooks/useTableSetting.ts';
import useCreatePlan from '../hooks/useCreatePlan.ts';

const SignDailog = defineAsyncComponent(() => import('./signDailog.vue'));
const emits = defineEmits(['onPointConfirm']);

import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

const props = defineProps({
    isEdit: {
        type: Boolean,
        default: false,
    },
});

const route = useRoute();
const store = useStore();
const active = ref(0);
const getPointList = ref([]);
const showDrawer = ref(false);
const planDetail = ref({});
const loadingMap = ref(false);
const showSignDailog = ref(false);

const { planId } = useCreatePlan();
const userInfo: any = computed(() => store.state.userGroup.userInfo);
const orderId = computed(() => store.state.plan.orderId || sessionStorage.getItem('orderId'));

const projectInfo = computed(() => [
    {
        label: '所属行业',
        value: 'tradeName',
    },
    {
        label: '开始日期',
        value: 'beginDate',
    },
    {
        label: '时长',
        value: 'secondsName',
    },
    {
        label: '频次',
        value: 'numbersName',
    },
    {
        label: '点位数上限',
        value: 'pointNumLimit',
    },
    {
        label: '已选楼盘数',
        value: 'premisesNum',
    },
    {
        label: '已选点位数',
        value: 'pointNum',
    },
]);
const handleGetBuilding = async () => {
    loadingMap.value = true;

    try {
        const data = await getAll({ planId: planId.value }) || {
            premisesList: [],
        };
        if (data.pointNumLimit === 0) {
            data.pointNumLimit = '无限制';
        }
        data.premisesList = data.premisesList.map((item) => {
            const [positionLng, positionLat] = item.position.split(',');
            return {
                ...item,
                positionLng,
                positionLat,
                types: item.type,
            };
        });

        planDetail.value = data;
    } finally {
        loadingMap.value = false;
    }
};
const { maxTableHeight, setTableMaxHeight } = useTableSetting({
    id: 'componentsContainer',
    offsetBottom: 0,
});

watch(
    () => active.value,
    () => {
        nextTick();
        if (active.value == selectPointTabsType.SELECT_BUILDING) {
            maxTableHeight.value = setTableMaxHeight('componentsContainer', 0);
            handleGetBuilding();
        } else {
            maxTableHeight.value = setTableMaxHeight('componentsContainer', 100);
        }
    }
);
handleGetBuilding();
const handleSubmit = async () => {
    return new Promise(async (resolve, reject) => {
        try {
            if (route.query.planStatus === '001' || !route.query.planStatus) {
                await lockPoint({ planId: planId.value });
            }

            if (!orderId.value && userInfo.value.useCrm) {
                showSignDailog.value = true;
                reject();
            }
            resolve(true);
        } catch {
            reject();
        }
    });
};
const handleCloseSignDailog = (type: string) => {
    if (type) {
        emits('onPointConfirm');
    }
    showSignDailog.value = false;
};

defineExpose({
    handleSubmit,
    active,
});
</script>

<style scoped lang="scss">
// .base-card {
//     padding-top: 0;
// }
.select-point-container {
    margin-top: 20px;
}
.map-box {
    flex: 1;
}
.top-info-bar {
    margin-top: -24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 20px;
    background: #fff;
    .info-container {
        display: flex;
        li + li {
            margin-left: 20px;
        }
        span {
            color: var(--el-color-primary);
        }
    }
}
</style>
